/*
  学习目标：Redux的核心概念-了解

  1. State： 保存了数据
  2. Action： 具有type字段的普通JS对象
  3. dispatch： 发起动作，接收一个action独享
    3.1 在Redux中修改state，只能通过dispatch
  4. reducer：计算状态
    4.1 纯函数： 固定输入 固定输出
    4.2 不能任何副作用：异步请求、DOM操作
    4.3 不能直接修改state
    4.4 👍 使用新值覆盖旧值
  5. 不可变数据



*/

import { createStore } from 'redux';

function test(state = { count: 0, msg: 'React' }, action) {
  console.warn('进入仓库了  ----->  ', action);

  if (action.type === 'add') {
    state.count++;
    return {
      ...state,
      count: state.count + 1,
    };
  }

  if (action.type === 'des') {
    return {
      ...state,
      count: state.count - 1,
    };
  }
  return state;
}

const store = createStore(test);

// console.log('store.getState().count  ----->  ', store.getState().count);

// store.dispatch({ type: 'add' });

// console.log('store.getState().count  ----->  ', store.getState().count);

// store.dispatch({ type: 'des' });

// 1.使用subscribe开启监听仓库
// 💥语法上：const 关闭监听的函数 = store.subscribe（回调函数），回调函数中，可以获取到更新后的值
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });
store.dispatch({ type: 'add' });

// 💥subscribe要在开启后，dispatch才能触发，开启前dispatch不触发
const unFn = store.subscribe(() => {
  console.log('store改变了  ----->  ', store.getState());
});

// console.log('unFn  ----->  ', unFn);

store.dispatch({ type: 'des' });

// 2. 关闭监听
// 💥调用unFn就是关闭监听
unFn();
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });
// store.dispatch({ type: 'des' });

const unFn = store.subscribe(() => {});
